آموزش های این وب سایت به صورت رایگان در دسترس است. اطلاعات بیشتر
بروز خطا
   [message]
اشتراک در سوال
رای ها
[dataList]

منو ریسپانسیو مثل سایت انکو ایکس.         حل شد 

سید فضل عباس زیدی  9 سال پیش  9 سال پیش
0 0

با سلام از دوستان من می خواهم یک منو ریسپانسیو درست کنم مثل خود سایت انکو اکس که در همه سایز ها ثابت باشه...

اما خیلی سرچ کردم به نتیجه نرسیدم  و راست به چپ پیدا نکردم.  

 

خودم توانستم چب به راست را درست کنم.. اما راست به چپ را نتونستم... ممن،ن میشم کسی راهنمایی کنه..

 برای این سوال 2 پاسخ وجود دارد. مشاهده پاسخ صحیح
پاسخ به سوال 
+1 0
 پاسخ صحیح

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>mohami</title>
    <link rel="stylesheet" href="../css/them.css">
    <link rel="stylesheet" href="../css/ar_them.css">
    <link href="https://fonts.googleapis.com/css?family=Changa" rel="stylesheet">
    <script >
        $("body select").msDropDown();
    </script>
</head>
<body>

    <div id="toggletop">
        <span id="shareicon"><a href="#"><img src="../img/share.png"/></span></a>
        <span id="titleofapp">بوابة المحامين</span>
    </div>
    <nav>
        <a href="#" class="nav-toggle-btn"> </a>
        <ul>
            <li><a href="armenu.php">الصفحة الرئيسية</a></li>
            <li><a href="#">قائمة المحامين</a></li>
            <li><a href="armenu.php">الأقسام </a></li>
            <li><a href="#">المدونة</a></li>
            <li><a href="news.php">أخبارنا</a></li>
            <li><a href="ar_about.php">من نحن </a></li>
            <li><a href="#">إتصل بنا</a></li>
        </ul>
    </nav>

    <div class="content">
        <div id="hidden"></div>
        <div class="banner"><img src="../img/banner.jpg" /></div>
        <div class="center">
           <a href="ecommerce.php">
               <div class="secsions">
                   <span id="titlelaw">قانون الإداري </span>
                   <span id="piclaw"></span>
               </div>
           </a>

            <a href="criminal.php">
                <div class="secsions">
                    <span id="titlelaw">قانون الاسرة احوال شخصية</span>
                    <span id="piclaw"></span>
                </div>
            </a>
            <a href="criminal.php">
                <div class="secsions">
                    <span id="titlelaw"> قانون الايجارات</span>
                    <span id="piclaw"></span>
                </div>
            </a>
            <a href="criminal.php">
                <div class="secsions">
                    <span id="titlelaw"> قانون التجاري </span>
                    <span id="piclaw"></span>
                </div>
            </a>
            <a href="criminal.php">
                <div class="secsions">
                    <span id="titlelaw"> قانون الجزائي </span>
                    <span id="piclaw"></span>
                </div>
            </a>
            <a href="criminal.php">
                <div class="secsions">
                    <span id="titlelaw"> قانون العمالي </span>
                    <span id="piclaw"></span>
                </div>
            </a>
            <a href="criminal.php">
                <div class="secsions">
                    <span id="titlelaw"> قانون المدني </span>
                    <span id="piclaw"></span>
                </div>
            </a>


        </div>

    </div>
    <footer>
        <div class="center">
            <a href="#"><div class="foot1">اتصل بنا</div></a>
            <a href="#"><div class="foot1">اخبارنا</div></a>
            <a href="#"><div class="foot1">قائمة المحامية</div></a>
            <a href="#"><div class="foot1">الاقسام</div></a>
        </div>
    </footer>

    <script src="../js/jquery.min.js"></script>
    <script type="text/javascript">

        (function(){
            var bodyEl = $('body'),
                navToggleBtn = bodyEl.find('.nav-toggle-btn');

            navToggleBtn.on('click', function(e) {
                bodyEl.toggleClass('active-nav');
                e.preventDefault();
            });
        })();

    </script>
</body>
</html>

Css Code

 
*{
    padding: 0px;
    margin:0px;
}
body{
    overflow-x: hidden;
    background-color: #e6e6e6;
}
div#toggletop {
    width: 100%;
    height: 48px;
    background: #de5252;
    display: block;
    position: fixed;
    overflow: overlay;
    z-index: 1000;
}
nav{
    width: 270px;
    background: #484848;
    position: fixed;
    right: 0px;
    bottom: 0;
    top: 0;
    z-index: 1000;
    transform: translate3d(270px, 0, 0);
    transition: transform 0.4s ease;
}
.active-nav nav{
    transform: translate3d(0, 0, 0);
}
nav ul{
    list-style: none;
    margin-top: 100px;
}
nav ul li a {
    text-decoration: none;
    display: block;
    color: #fff;
    padding: 10px 0px;
}
.nav-toggle-btn{
    display: block;
    position: absolute;
    right: 270px;
    width: 48px;
    height: 48px;
    background-image: url("../img/togg.png");
}

.content {
    height: auto;
    transition: transform 0.4s ease;
    background: #e6e6e6;
    padding-bottom: 40px;
}

.active-nav .content{
    transform: translate3d(-200px, 0, 0);
}

 

+1 0
خب کد را برای استفاده دیگران هم قرار بدید! (9 سال پیش)
پاسخ به سوال 
0 0

index.html

 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>mohami</title>
    <link rel="stylesheet" href="../css/them.css">
    <link rel="stylesheet" href="../css/ar_them.css">
    <link href="https://fonts.googleapis.com/css?family=Changa" rel="stylesheet">
    <script >
        $("body select").msDropDown();
    </script>
</head>
<body>

    <div id="toggletop">
        <span id="shareicon"><a href="#"><img src="../img/share.png"/></span></a>
        <span id="titleofapp">بوابة المحامين</span>
    </div>
    <nav>
        <a href="#" class="nav-toggle-btn"> </a>
        <ul>
            <li><a href="armenu.php">الصفحة الرئيسية</a></li>
            <li><a href="#">قائمة المحامين</a></li>
            <li><a href="armenu.php">الأقسام </a></li>
            <li><a href="#">المدونة</a></li>
            <li><a href="news.php">أخبارنا</a></li>
            <li><a href="ar_about.php">من نحن </a></li>
            <li><a href="#">إتصل بنا</a></li>
        </ul>
    </nav>

    <div class="content">
        <div id="hidden"></div>
        <div class="banner"><img src="../img/banner.jpg" /></div>
        <div class="center">
           <a href="ecommerce.php">
               <div class="secsions">
                   <span id="titlelaw">قانون الإداري </span>
                   <span id="piclaw"></span>
               </div>
           </a>

            <a href="criminal.php">
                <div class="secsions">
                    <span id="titlelaw">قانون الاسرة احوال شخصية</span>
                    <span id="piclaw"></span>
                </div>
            </a>
            <a href="criminal.php">
                <div class="secsions">
                    <span id="titlelaw"> قانون الايجارات</span>
                    <span id="piclaw"></span>
                </div>
            </a>
            <a href="criminal.php">
                <div class="secsions">
                    <span id="titlelaw"> قانون التجاري </span>
                    <span id="piclaw"></span>
                </div>
            </a>
            <a href="criminal.php">
                <div class="secsions">
                    <span id="titlelaw"> قانون الجزائي </span>
                    <span id="piclaw"></span>
                </div>
            </a>
            <a href="criminal.php">
                <div class="secsions">
                    <span id="titlelaw"> قانون العمالي </span>
                    <span id="piclaw"></span>
                </div>
            </a>
            <a href="criminal.php">
                <div class="secsions">
                    <span id="titlelaw"> قانون المدني </span>
                    <span id="piclaw"></span>
                </div>
            </a>


        </div>

    </div>
    <footer>
        <div class="center">
            <a href="#"><div class="foot1">اتصل بنا</div></a>
            <a href="#"><div class="foot1">اخبارنا</div></a>
            <a href="#"><div class="foot1">قائمة المحامية</div></a>
            <a href="#"><div class="foot1">الاقسام</div></a>
        </div>
    </footer>

    <script src="../js/jquery.min.js"></script>
    <script type="text/javascript">

        (function(){
            var bodyEl = $('body'),
                navToggleBtn = bodyEl.find('.nav-toggle-btn');

            navToggleBtn.on('click', function(e) {
                bodyEl.toggleClass('active-nav');
                e.preventDefault();
            });
        })();

    </script>
</body>
</html>

Css Code

 
*{
    padding: 0px;
    margin:0px;
}
body{
    overflow-x: hidden;
    background-color: #e6e6e6;
}
div#toggletop {
    width: 100%;
    height: 48px;
    background: #de5252;
    display: block;
    position: fixed;
    overflow: overlay;
    z-index: 1000;
}
nav{
    width: 270px;
    background: #484848;
    position: fixed;
    right: 0px;
    bottom: 0;
    top: 0;
    z-index: 1000;
    transform: translate3d(270px, 0, 0);
    transition: transform 0.4s ease;
}
.active-nav nav{
    transform: translate3d(0, 0, 0);
}
nav ul{
    list-style: none;
    margin-top: 100px;
}
nav ul li a {
    text-decoration: none;
    display: block;
    color: #fff;
    padding: 10px 0px;
}
.nav-toggle-btn{
    display: block;
    position: absolute;
    right: 270px;
    width: 48px;
    height: 48px;
    background-image: url("../img/togg.png");
}

.content {
    height: auto;
    transition: transform 0.4s ease;
    background: #e6e6e6;
    padding-bottom: 40px;
}

.active-nav .content{
    transform: translate3d(-200px, 0, 0);
}

 

پاسخگویی و مشاهده پاسخ های این سوال تنها برای اعضای ویژه سایت امکان پذیر است .
چنانچه تمایل دارید به همه بخش ها دسترسی داشته باشید میتوانید از این بخش لایسنس این آموزش را خریداری نمایید .